.doc > section.tools > article {
	display: flex;
	flex-direction: column;
	background: $doc-lightest;

	.icon.help {
		@extend %link;
		// this is a bit hacky, but lets us reuse the help icon everywhere.
		position: absolute;
		right: $pad*0.25;
		transform: translate(0, -50%) translate(0, $input-height/2);
		padding: $pad;
		color: rgba($doc-black, 0.25);
		z-index: 10;
		&:hover {
			color: $doc-darkest !important;
		}
	}
	
	.inputtool {
		display: none;
		flex-direction: column;
		flex: 1;

		.editor {
			position: relative;
			flex: 0 $input-height;
			background: $doc-white;
			border-bottom: solid 1px $doc-lighter;
			
			> .CodeMirror {
				padding: $pad 0 0 $pad;
				height: 100%;
				font-weight: bold;
			}
		}
		
		
		.result {
			flex: 1;
			
			textarea {
				box-sizing: border-box;
				padding: $pad 0 $pad $pad;
				resize: none;
				display: block;
				border: 0;
				background: none;
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: $monospace;
				font-size: $font-size;
				color: $doc-black;
				&:focus {
					outline: none;
				}
			}
		}
	}
	
	.content {
		flex: 1 1 0%; // fix for FireFox (vs just `1`)
		min-height: 0; // fix for Chrome 72+
		overflow-y: auto;
		display: block;
		padding: $pad;
	}
	
	&.showinput {
		.inputtool {
			display: flex;
		}
		.content {
			display: none;
		}
	}
}